import * as THREE from "three";
//创建场景
const scene = new THREE.Scene();
//创建透视相机 还有
const camera = new THREE.PerspectiveCamera(
  //fov：透视相机视线角度，单位为弧度。例如，fov值为60度时，摄像机视野范围为水平方向90度，垂直方向90度。
  45,
  //aspect：摄像机的宽高比。例如，当宽高比为2时，摄像机宽度为高度的两倍。
  window.innerWidth / window.innerHeight,
  //near：摄像机焦距距离，单位为像素。例如，当near值为0.1时，远近平面距离为100像素
  0.1,
  //far：摄像机裁剪距离，单位为像素。例如，当far值为1000时，超过该距离的物体将不会被渲染。
  1000
);
//创建正交相机
// const camera = new THREE.OrthographicCamera(
//   -2, // left
//   2, // right
//   1, // top
//   -1, // bottom
//   0.1, // near
//   100 // far
// );
camera.position.set(0, 1, 8);
// camera.position.z = 8;
// camera.position.y = 1;

//创建立方体
const geometry = new THREE.SphereGeometry();
// const material = new THREE.MeshBasicMaterial({
//   color: "#4a1486",
//   wireframe: true
// });

//自定义材质Shader 可以单独写在诸如 vertex.glsl、fragment.glsl 的文件里再导入使用；
//也可以和示例一样直接在 JavaScript 里用字符串格式表示
// const vertex = `
//   varying vec2 vUv;

//   void main() {
//     vUv = uv;
//     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
//   }
// `;

// const fragment = `
//   varying vec2 vUv;

//   void main() {
//     vec3 color = vec3(step(0.5, fract(vUv.x * 3.0)));
//     gl_FragColor = vec4(color, 1.0);
//   }
// `;

// const material = new THREE.ShaderMaterial({
//   vertexShader: vertex,
//   fragmentShader: fragment
// });

const vertex = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;
/* glsl里的step函数 */
/* step(0.5,vUv.x)会返回0.0-1.0的数值,
step(0.5, vUv.x) 通过 vUv.x 和 0.5 比较，小于0.5的返回0.0，大于0.5的返回1.0，
并将该 color 变成转换成 vec3() 格式，于是就是黑白突变的格式 */

/* glsl里的fract函数 */
/* fract(vUv.x * 3.0) 返回 0.0-1.0 之间的数值，
可以通过对 vUv 乘以一定倍数放大，比如0.0-1.0放大3倍变成0.0-3.0，
然后用 fract() 函数取小数使得数值在 0.0-1.0 里循环重复，
比如1.1、2.1取小数后都变回0.1，再将该数值转换成 vec3 再设置到颜色上，就会产生重复的黑白渐变效果 */
const fragment = `
  varying vec2 vUv;
  void main() {    
    float color2 = step(0.5,fract(vUv.x * 5.0));
    gl_FragColor = vec4(vUv,vec3(color2));
  }
`;

const material = new THREE.ShaderMaterial({
  vertexShader: vertex,
  fragmentShader: fragment
});

//网格
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0.8, 0);
scene.add(mesh);

//渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor("#e6fcf5", 1);
document.body.appendChild(renderer.domElement);

//添加网格地面
const GridHelper = new THREE.GridHelper(10, 10);
scene.add(GridHelper);

//动画
function animate() {
  // 请求下一次动画渲染
  requestAnimationFrame(animate);
  // mesh的旋转属性递增
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  // 使用渲染器渲染场景
  renderer.render(scene, camera);
}
animate();
